<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商名称：</span>
                <el-input placeholder="输入供应商名称" v-model.trim="supplier_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">账号信息：</span>
                <el-input placeholder="输入账号信息" v-model.trim="accounts" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">提现时间：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="default" @click="clickExport">导出</el-button>
            </div>
        </div>
        <div class="table-mb"></div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="供应商" width="230" fixed="left">
                <template #default="{ row }">
                    <span>{{ row.supplier_title }}[ID: {{ row.supplier_id }}]</span>
                </template>
            </el-table-column>
            <el-table-column label="提现方式" width="100">
                <template #default="{ row }">
                    <span>{{ row.from == "weixin" ? "微信" : "银行卡" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="提现金额"></el-table-column>
            <el-table-column prop="end_money" label="实际到账"></el-table-column>
            <el-table-column label="提现状态">
                <template #default="{ row }">
                    <span style="color: #4b93fa" v-if="row.status == 1">已通过</span>
                    <span style="color: #f56c6c" v-else>{{ row.status == 0 ? "待处理" : "已拒绝" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="account_info" label="账号信息" width="320"></el-table-column>
            <el-table-column label="失败原因" width="200">
                <template #default="{ row }">
                    <div class="line-two">{{ row.reason }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="updated_at_label" label="更新时间" width="160"></el-table-column>
            <el-table-column prop="created_at_label" label="申请时间" width="160"></el-table-column>
            <el-table-column label="操作" width="140" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <template v-if="row.status == 0">
                        <el-button link type="primary" class="theme-btn" @click="clickAdopt(row)">通过</el-button>
                        <el-button link type="primary" class="theme-btn" @click="clickBack(row)">退回</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>

    <!-- 退回 -->
    <el-dialog v-model="dialogBack" draggable title="提现退回" width="600px" :append-to-body="true" :destroy-on-close="true" @close="closeBack">
        <div>
            <detail-item title="退回原因" bottom="24px">
                <el-input v-model.trim="remarks" :rows="5" type="textarea" clearable placeholder="请输入退回原因，如账号信息有误" />
                <p class="back-tip">提示：退回以后，金额将返回该账户余额中</p>
            </detail-item>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" :loading="btn_loading" @click="confirmBack">确认退回</el-button>
                <el-button @click="closeBack">取消</el-button>
            </span>
        </template>
    </el-dialog>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter } from "vue-router"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    // getList()
})
/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
loading.value = false
arr_data.value = ref([
    {
        account_info: "史欢(oNEgz5CSdS3n_5X-_huefzakSQnk)",
        account_number: "oNEgz5CSdS3n_5X-_huefzakSQnk",
        created_at_label: "2022-07-22 14:01:17",
        end_money: "176.00",
        from: "weixin",
        intro: "余额提现:176元",
        mobile: "13056954976",
        money: "176.00",
        reason: "",
        status: 0,
        supplier_id: 10324,
        supplier_title: "浅卉花卉",
        title: "浅卉花卉",
        tixian_id: 3507,
        updated_at_label: "2022-07-22 14:01:17",
    },
    {
        account_info: "赵梅会(oNEgz5GYtPLHSq4mn_JmKgQlKiVg)",
        account_number: "oNEgz5GYtPLHSq4mn_JmKgQlKiVg",
        created_at_label: "2022-07-15 09:40:13",
        end_money: "304.50",
        from: "weixin",
        intro: "余额提现:304.5元",
        mobile: "18313838580",
        money: "304.50",
        reason: "系统繁忙，请稍后再试",
        status: 1,
        supplier_id: 10210,
        supplier_title: "鸿运草花",
        title: "鸿运草花",
        tixian_id: 3404,
        updated_at_label: "2022-07-15 14:19:40",
    },
])
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: supplier_name.value,
        accounts: accounts.value,
        supplier_id: supplier_id.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("", params)
}

// 搜索
const supplier_name = ref("")
const supplier_id = ref("")
const accounts = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 通过
const clickAdopt = (row) => {
    proxy.$axios
        .post("", {
            tixian_id: row.tixian_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 退回
 * @param {Boolean} dialogBack 弹窗状态
 * @param {Boolean} btn_loading 按钮提交状态
 * @param {String} tid 提现ID
 * @param {String} remarks 退回原因
 */
const dialogBack = ref(false)
const btn_loading = ref(false)
const tid = ref("")
const remarks = ref("")
const clickBack = (row) => {
    dialogBack.value = true
    tid.value = row.tixian_id
}
const confirmBack = () => {
    if (remarks.value == "") {
        proxy.$message({ message: "请输入退回原因!", type: "warning" })
        return
    }
    proxy.$axios
        .post("", {
            tixian_id: tid.value,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
const closeBack = () => {
    dialogBack.value = false
    remarks.value = ""
    tid.value = ""
}

// 导出
const clickExport = () => {}
</script>
<script>
export default {
    name: "WithdrawalLog",
}
</script>

<style lang="less" scoped>
.back-tip {
    line-height: 32px;
    font-size: @font-size-md;
    width: 100%;
    color: #f56c6c;
}
</style>
